<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>
<style>
    #app1{
       text-decoration: underline ;color:blue;
       border-color: black;

        
        
}
  #app2{
    background-color:cornflowerblue;
  }
    td{
        width: 100px;
        height: 30px;
        border: solid;
        border-width: thin;
        margin-top: 10px;
    }
    #app3{
        width: 400px;
    }
    #app4{
        width: 180px;
    }
</style>
<body>
    <div id="app" style="width: 800px;height:50px;border: solid;border-width: thin;">
        <div  >
            <p>品牌名称:   <input type="text" v-model="com">
      <button @click="sub">添加</button></p>
        <div v-for="msg in msgs">
            {{msg}}
        </div>
    </div>
    </div>
    <div id="app" style="width: 800px;height:50px;border: solid;border-width: thin;margin-top: 10px;">
        <div  >
            <p>品牌名称:   <input type="text" v-model="com">
      <button @click="sub">搜索</button></p>
    </div>
    </div>
<div >
    <table>
        <tr>
            <td id="app2" align="center">编号</td>
            <td id="app2" id="app4" align="center">品牌名称</td>
            <td id="app2" id="app3" align="center">创立时间</td>
            <td id="app2" align="center">操作</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td id="app4" align="center">欧美</td>
            <td id="app3" align="center">2022-12-01 21:14:32</td>
            <td id="app1" align="center">删除</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td id="app4" align="center">日韩</td>
            <td id="app3" align="center">2022-12-01 21:14:32</td>
            <td id="app1" align="center">删除</td>
        </tr>
        <tr>
            <td align="center">3</td>
            <td id="app4" align="center">大陆</td>
            <td id="app3" align="center">2022-12-01 21:14:32</td>
            <td id="app1" align="center">删除</td>
        </tr>
    </table>
</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                com:'',
                msgs:[],

            
            },
            methods: {
                sub(){
                    this.msgs.push(this.com);
                    this.com = ""

              

                }
            }
        })
    </script>
</body>

</html>